<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>积分兑换商品</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .product {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 20px;
        }
        .product img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center my-4">积分兑换商品</h1>



    <!-- 商品列表 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- 商品卡片 -->

            <div class="bg-white rounded-xl overflow-hidden shadow card-hover">
                <div class="relative">
                    <c:choose>
                        <c:when test="${not empty param.img}">
                            <img src="${param.img}" alt="${param.gname}" class="w-full h-56 object-cover">
                        </c:when>
                        <c:otherwise>
                            <div class="w-full h-56 bg-gray-100 flex items-center justify-center">
                                <i class="fa fa-image text-gray-300 text-5xl"></i>
                            </div>
                        </c:otherwise>
                    </c:choose>
                    <div class="absolute top-2 right-2 bg-warning text-white text-xs font-bold px-2 py-1 rounded">
                            ${param.scorerequired}积分
                    </div>
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-lg mb-2">${param.gname}</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">${param.describe1}</p>
                    <div class="flex justify-between items-center">
                        <div>
                            <span class="text-gray-500 text-sm">原价:</span>
                            <span class="text-gray-800 font-medium ml-1">¥${param.price}</span>
                        </div>
                        <c:choose>
                            <c:when test="${param.score >= param.scorerequired}">
                                <a href="${pageContext.request.contextPath}/orders/exchange/${param.gid}" class="btn-primary">
                                    <i class="fa fa-exchange mr-1"></i> 立即兑换
                                </a>
                            </c:when>
                            <c:otherwise>
                                <button class="btn-disabled">
                                    <i class="fa fa-exchange mr-1"></i> 积分不足
                                </button>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>

    </div>


</div>
</body>
</html>